<template>
	<div>
		<div>
			<h2>基础用法</h2>
			<at-transfer v-model="value1" :data="data"></at-transfer>
			<hr>
		</div>
		<div>
			<h2>可搜索</h2>
			<at-transfer
				filterable
				:filter-method="filterMethod"
				filter-placeholder="请输入城市拼音"
				v-model="value2"
				:data="data2">
			</at-transfer>
			<hr>
		</div>
		<div>
			<h2>可自定义</h2>
			<at-transfer
				v-model="value3"
				filterable
				:left-default-checked="[2, 3]"
				:right-default-checked="[1]"
				:render-content="renderFunc"
				:titles="['Source', 'Target']"
				:button-texts="['到左边', '到右边']"
				:format="{
				  noChecked: '${total}',
				  hasChecked: '${checked}/${total}'
				}"
				@change="handleChange"
				:data="data3">
				<at-button class="transfer-footer" slot="left-footer" size="small">操作</at-button>
				<at-button class="transfer-footer" slot="right-footer" size="small">操作</at-button>
			</at-transfer>
			<hr>
		</div>
	</div>
	
</template>

<script>
  export default {
    data() {
		const generateData = _ => {
			const data = [];
			for (let i = 1; i <= 15; i++) {
				data.push({
					key: i,
					label: `备选项 ${ i }`,
					disabled: i % 4 === 0
				});
			}
			return data;
		};
		const generateData2 = _ => {
			const data = [];
			const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
			const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
			cities.forEach((city, index) => {
				data.push({
					label: city,
					key: index,
					pinyin: pinyin[index]
				});
			});
			return data;
		};
		return {
			data: generateData(),
			value1: [1, 4],

			data2: generateData2(),
			value2: [],
			filterMethod(query, item) {
			  return item.pinyin.indexOf(query) > -1;
			},

			data3: generateData(),
			value3: [1],
			renderFunc(h, option) {
			  return <span>{ option.key } - { option.label }</span>;
			}
		};
	},
    methods: {
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      }
    }
  };
</script>

<style>
  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>